<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
	xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	lang="en">
	
	<ui:decorate template="/WEB-INF/facelets/faceletLogin.xhtml">
		<ui:define name="form">
			<div class="login-container">
				<h1>Bem vindo ao C.L.E. Iluminando Caminhos!</h1>
				<div id="output"></div>
			    <div class="avatar"></div>
			    <div class="form-box">
			    	<h:form>	
			           	<p:messages id="mensagens"></p:messages>
			           	<p:inputText id="usuario" value="#{LoginMB.usuario}" maxlength="20" required="true"/>
			        	<p:password id="senha" value="#{LoginMB.senha}" maxlength="20" />
			            <p:commandButton action="#{LoginMB.login}" value="Logar" styleClass="btn btn-info btn-block login"></p:commandButton>
					</h:form>
				</div>
			</div>
		</ui:define>
	</ui:decorate>
	
	<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-38100107-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

  $(function(){
	  var textfield = $("input[name=user]");
	              $('button[type="submit"]').click(function(e) {
	                  e.preventDefault();
	                  //little validation just to check username
	                  if (textfield.val() != "") {
	                      //$("body").scrollTo("#output");
	                      $("#output").addClass("alert alert-success animated fadeInUp").html("Welcome back " + "<span style='text-transform:uppercase'>" + textfield.val() + "</span>");
	                      $("#output").removeClass(' alert-danger');
	                      $("input").css({
	                      "height":"0",
	                      "padding":"0",
	                      "margin":"0",
	                      "opacity":"0"
	                      });
	                      //change button text 
	                      $('button[type="submit"]').html("continue")
	                      .removeClass("btn-info")
	                      .addClass("btn-default").click(function(){
	                      $("input").css({
	                      "height":"auto",
	                      "padding":"10px",
	                      "opacity":"1"
	                      }).val("");
	                      });
	                      
	                      //show avatar
	                      $(".avatar").css({
	                          "background-image": "url('http://api.randomuser.me/0.3.2/portraits/women/35.jpg')"
	                      });
	                  } else {
	                      //remove success mesage replaced with error message
	                      $("#output").removeClass(' alert alert-success');
	                      $("#output").addClass("alert alert-danger animated fadeInUp").html("sorry enter a username ");
	                  }
	                  //console.log(textfield.val());

	              });
	  });
	    

</script>
</html>